<template>
	<view class="profile-page">
		<!-- 顶部渐变背景 -->
		<view class="profile-bg" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="back-btn" @click="goBack">
				<text class="fas fa-arrow-left"></text>
			</view>
			<view class="avatar-container">
				<view class="avatar">
					<text class="fas fa-user"></text>
				</view>
			</view>
		</view>
		
		<!-- 个人信息卡片 -->
		<view class="info-card">
			<view class="card-title">{{ t('profile.personalInfo') }}</view>
			
			<!-- 基本信息区域 -->
			<view class="info-list">
				<!-- 姓名 -->
				<view class="info-item">
					<text class="fas fa-user-circle icon"></text>
					<view class="item-content">
						<text class="item-label">{{ t('profile.name') }}</text>
						<text class="item-value">张三</text>
					</view>
				</view>
				
				<!-- 学院 -->
				<view class="info-item">
					<text class="fas fa-university icon"></text>
					<view class="item-content">
						<text class="item-label">{{ t('profile.college') }}</text>
						<text class="item-value">计算机工程学院</text>
					</view>
				</view>
				
				<!-- 专业 -->
				<view class="info-item">
					<text class="fas fa-laptop-code icon"></text>
					<view class="item-content">
						<text class="item-label">{{ t('profile.major') }}</text>
						<text class="item-value">软件工程</text>
					</view>
				</view>
				
				<!-- 学号 -->
				<view class="info-item">
					<text class="fas fa-id-badge icon"></text>
					<view class="item-content">
						<text class="item-label">{{ t('profile.studentId') }}</text>
						<text class="item-value">2023012345</text>
					</view>
				</view>
				
				<!-- 手机号 -->
				<view class="info-item">
					<text class="fas fa-phone icon"></text>
					<view class="item-content">
						<text class="item-label">{{ t('profile.phone') }}</text>
						<text class="item-value">138****5678</text>
					</view>
					<view class="edit-btn" @click="editPhone">{{ t('profile.edit') }}</view>
				</view>
				
				<!-- 邮箱 -->
				<view class="info-item">
					<text class="fas fa-envelope icon"></text>
					<view class="item-content">
						<text class="item-label">{{ t('profile.email') }}</text>
						<text class="item-value">zhangsan@example.com</text>
					</view>
					<view class="edit-btn" @click="editEmail">{{ t('profile.edit') }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import zhLocale from '../../locales/zh.js'
import enLocale from '../../locales/en.js'

export default {
	data() {
		return {
			statusBarHeight: 20,
			currentLang: 'zh', // 默认语言
			locales: {
				zh: zhLocale,
				en: enLocale
			}
		}
	},
	onLoad() {
		// 初始化语言设置
		this.initLanguage();
		
		try {
			const sysInfo = uni.getSystemInfoSync();
			this.statusBarHeight = sysInfo.statusBarHeight || 20;
		} catch (e) {
			console.error('获取状态栏高度失败', e);
		}
	},
	methods: {
		// 翻译函数
		t(key) {
			const keys = key.split('.');
			let result = this.locales[this.currentLang];
			
			for (let k of keys) {
				if (result[k] === undefined) return key;
				result = result[k];
			}
			
			return result;
		},
		
		// 初始化语言设置
		initLanguage() {
			try {
				const savedLang = uni.getStorageSync('appLanguage');
				if (savedLang) {
					this.currentLang = savedLang;
				}
			} catch (e) {
				console.error('获取语言设置失败', e);
			}
		},
		
		goBack() {
			// 返回到首页（聊天页）
			if (getCurrentPages().length > 1) {
				// 如果有上一页，返回上一页
				uni.navigateBack();
			} else {
				// 如果没有上一页，跳转到首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		editPhone() {
			uni.showModal({
				title: this.t('profile.editPhone'),
				editable: true,
				placeholderText: this.t('profile.enterNewPhone'),
				success: (res) => {
					if (res.confirm && res.content) {
						if (res.content.length === 11) {
							uni.showToast({
								title: this.t('profile.phoneUpdateSuccess'),
								icon: 'success'
							});
							// 这里可以添加实际的修改逻辑
						} else {
							uni.showToast({
								title: this.t('profile.invalidPhone'),
								icon: 'none'
							});
						}
					}
				}
			});
		},
		editEmail() {
			uni.showModal({
				title: this.t('profile.editEmail'),
				editable: true,
				placeholderText: this.t('profile.enterNewEmail'),
				success: (res) => {
					if (res.confirm && res.content) {
						if (res.content.includes('@')) {
							uni.showToast({
								title: this.t('profile.emailUpdateSuccess'),
								icon: 'success'
							});
							// 这里可以添加实际的修改逻辑
						} else {
							uni.showToast({
								title: this.t('profile.invalidEmail'),
								icon: 'none'
							});
						}
					}
				}
			});
		}
	}
}
</script>

<style>
.profile-page {
	min-height: 100vh;
	background-color: #f3f4f6; /* bg-gray-100 */
}

.profile-bg {
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	height: 192px; /* h-48 */
	border-bottom-left-radius: 1.5rem; /* rounded-b-3xl */
	border-bottom-right-radius: 1.5rem;
	position: relative;
}

.back-btn {
	position: absolute;
	top: calc(16px + var(--status-bar-height));
	left: 16px;
	font-size: 24px; /* text-2xl */
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

.avatar-container {
	position: absolute;
	bottom: -64px; /* -bottom-16 */
	left: 50%;
	transform: translateX(-50%);
}

.avatar {
	width: 128px; /* w-32 */
	height: 128px; /* h-32 */
	background-color: #d1d5db; /* bg-gray-300 */
	border-radius: 50%; /* rounded-full */
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4px solid #fff; /* border-4 border-white */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
}

.avatar .fas {
	font-size: 48px; /* text-5xl */
	color: #fff; /* text-white */
}

.info-card {
	margin: 80px 24px 0 24px; /* mt-20 px-6 */
	background-color: #fff; /* bg-white */
	border-radius: 1rem; /* rounded-2xl */
	padding: 24px; /* p-6 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

.card-title {
	font-size: 24px; /* text-2xl */
	font-weight: bold; /* font-bold */
	text-align: center; /* text-center */
	margin-bottom: 16px; /* mb-4 */
}

.info-list {
	display: flex;
	flex-direction: column;
	gap: 16px; /* space-y-4 */
}

.info-item {
	display: flex;
	align-items: center;
}

.info-item .icon {
	width: 24px; /* w-6 */
	color: #3b82f6; /* text-blue-500 */
	font-size: 20px; /* text-xl */
}

.item-content {
	margin-left: 16px; /* ml-4 */
	flex: 1; /* flex-1 */
}

.item-label {
	font-size: 14px; /* text-sm */
	color: #6b7280; /* text-gray-500 */
	display: block;
}

.item-value {
	font-weight: 500; /* font-medium */
	display: block;
}

.edit-btn {
	color: #3b82f6; /* text-blue-500 */
	font-size: 14px; /* text-sm */
}
</style> 